<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>客房查询</title>
    <link href="/static/css/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="/static/js/jquery.js"></script>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
    <style type="text/css">
        .rightinfo > div {
            margin-right: 5px;
            margin-bottom: 5px;
            display: inline-block;
            text-align: center;
            width: 100px;
            height: 100px;
            color: black;
            font-weight: bolder;
        }

        .kx { /* 空闲 */
            background: green;
        }

        .kx:hover { /* 空闲 */
            cursor: pointer;
        }

        .yrz { /* 已经入住 */
            background: red;
        }

        .ds {
            background: yellow;
        }
    </style>
</head>

<body>
<div class="place"><span>位置：</span>
    <ul class="placeul">
        <li>客房管理</li>
        <li>客房信息查询</li>
    </ul>
</div>
<div class="rightinfo">
    <div v-for="room in roomsList" v-if="room.roomStatus=='0'" class="kx" @click="toInRoom">
        房间号：{{room.roomNum}}<br/>
        价格：{{room.roomPrice}}<br/>
        类型：{{room.roomTypeName}}
    </div>
    <div v-for="room in roomsList" v-if="room.roomStatus=='1'" class="yrz">
        房间号：{{room.roomNum}}<br/>
        价格：{{room.roomPrice}}<br/>
        类型：{{room.roomTypeName}}
    </div>
    <div v-for="room in roomsList" v-if="room.roomStatus=='2'" class="ds" @click="toSpareRoom(room.id)">
        房间号：{{room.roomNum}}<br/>
        价格：{{room.roomPrice}}<br/>
        类型：{{room.roomTypeName}}
    </div>
</div>
<script type="text/javascript">
    const vue1 = new Vue({
        el: ".rightinfo",
        data: {
            roomsList: []
        },
        methods: {
            toInRoom() {
                window.location.href = "/pages/bill/checkin.jsp";
            },
            toSpareRoom(id) {
                this.$http.post("/changeRoomFromCleanToSpareById.do?id=" + id).then(
                    function (rs) {
                        if (rs.data) {
                            window.location.href = "showRoom.html";
                        } else {
                            window.alert("修改失败，请重试");
                        }
                    },
                    function (err) {
                        window.alert("数据请求失败");
                    }
                );
            }
        },
        mounted() {
            this.$http.post("/getRoomInfo.do").then(
                function (rs) {
                    this.roomsList = rs.data;
                }
            );
        }
    });
</script>
</body>
</html>
